<template>
  <div>
    <!-- 商品信息 -->
    <div class="container">
      <div class="body_box">
        <div class="img_box">
          <img :src="goodsDetail.pic_url" :alt="goodsDetail.pic_url" />
        </div>
        <p class="price">￥{{ (goodsDetail.price / 100).toFixed(2) }}</p>
        <div class="goods_name">{{ goodsDetail.name }}</div>
        <p class="brands">品牌商：{{ goodsDetail.brand }}</p>
        <div class="express_prompt">
          <span>
            库存：<span>{{ goodsDetail.stock }}</span>
          </span>
          <span>免邮费 顺丰快递</span>
        </div>
        <div class="detail">
          <p class="title">商品详情</p>
          <!-- v-html  解析我们的html代码 -->
          <p class="content" v-html="goodsDetail.detail_info"></p>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <van-action-bar>
      <van-action-bar-icon
        :badge="store.count"
        @click="router.replace('/cart')"
        icon="cart-o"
        text="购物车"
      />
      <van-action-bar-icon
        @click="collectThis"
        :icon="goodsDetail.collect > 0 ? 'star' : 'star-o'"
        :text="goodsDetail.collect > 0 ? '已收藏' : '未收藏'"
        color="#ff5000"
      />
      <van-action-bar-button
        @click="addCart"
        type="warning"
        text="加入购物车"
      />
      <van-action-bar-button
        type="danger"
        @click="router.push(`/address-list?goodsId=${route.params.id}`)"
        text="立即购买"
      />
    </van-action-bar>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { showSuccessToast } from "vant";
// 引入商品详情接口
import { getGoodDetail } from "@/api/goods";
// 引入添加商品接口
import { cartAdd, cartEdit } from "@/api/cart";
// 引入收藏接口
import { addCollect, deleteCollect } from "@/api/collect";

// 引入仓库
import useCartInfo from "@/stores/useCartInfo";
// 购物车仓库实例化
let store = useCartInfo();

// 路由实例
let route = useRoute();
// 商品详情数据
let goodsDetail = ref({});

// 路由对象
let router = useRouter();

// 收藏和取消收藏
let collectThis = async () => {
  // 判断收藏还是取消收藏 分别调不同的接口
  if (goodsDetail.value.collect > 0) {
    await deleteCollect({ type: "1", object_id: route.params.id });
    showSuccessToast("取消收藏成功");
    goodsDetail.value.collect = 0;
  } else {
    await addCollect({ type: "1", object_id: route.params.id });
    showSuccessToast("收藏成功");
    goodsDetail.value.collect = 1;
  }
};

// 加入购物车
let addCart = async () => {
  // 在购物车列表内 查询 是否有当前商品  有则返回对应数据  无则返回undfind
  let bol = store.list.find((item) => item.goods_id == route.params.id);
  if (bol) {
    // 有就调编辑商品接口
    await cartEdit({
      id: bol.id,
      goods_id: route.params.id,
      count: bol.count + 1,
    });
    showSuccessToast("添加购物车成功");
    // 更新仓库数据
    store.getCartList();
  } else {
    await cartAdd({ count: "1", goods_id: route.params.id });
    showSuccessToast("添加购物车成功");
    // 跟新仓库数据
    store.getCartList();
  }
};

onMounted(async () => {
  let res = await getGoodDetail(route.params.id);
  goodsDetail.value = res;
});
</script>

<style lang="less" scoped>
// 内边距离
@pad: 8px;

.body_box {
  background-color: white;
  margin: 0 10px;

  .img_box {
    width: 100%;
    text-align: center;

    img {
      width: 100%;
    }
  }

  .goods_name {
    padding: 0 pad;
    background-color: white;
    font-size: 18px;
  }

  .brands,
  .express_prompt {
    padding: 0 pad;
    display: flex;
    justify-content: space-between;
    color: #999999;
    font-size: 14px;
    margin: 6px 0;
  }

  .price {
    padding: 0 pad;
    color: #f63515;
    font-size: 22px;
    margin: 6px 0;
  }

  .detail {
    .title {
      margin: 10px 0;
      font-weight: bold;
      font-size: 14px;
      color: black;
      text-align: center;
    }

    .content {
      padding: 0 12px;
      font-size: 16px;
      color: rgb(84, 84, 84);
      text-indent: 2em;
    }
  }
}
</style>

